<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				border:2px solid red;
			}
			#d1 img{
				margin: 5px;
			}
		</style>
		<script>
			function createImg(){
				var im=document.createElement("img");
				im.setAttribute("src","../img/tou01.jpg");
				im.setAttribute("width","100px");
				im.setAttribute("height","100px");
				//document.body.appendChild(im);
				
				document.getElementById("d1").appendChild(im);
				
			}
			function createImg2(){
				var im=document.createElement("img");
				im.setAttribute("src","../img/tou02.jpg");
				im.setAttribute("width","100px");
				im.setAttribute("height","100px");
				
				var d1=document.getElementById("d1");
				d1.parentNode.insertBefore(im,d1);
			}
			function cloneDiv(){
				var d=document.getElementById("d1");
				var d2=d.cloneNode(true);
				//document.body.appendChild(d.cloneNode(true));
				//把克隆后的，加在网页的开头
				document.body.insertBefore(d2,document.body.firstElementChild);
			}
			function delLi3(){
				var p1=document.getElementById("p1");
				//p1.remove();
				p1.removeChild(p1.children[2]);
			}
			function changeFont(t){
				//alert("字体大小："+t.style.fontSize);//行内样式
				t.style.fontSize="99px";
				t.style.color="red";
				t.style.listStyle="none";
				t.style.borderRadius="30px";
				t.style.border="4px groove blue";
			}
			function resetFont(t){
				t.style="none";
			}
		</script>
	</head>
	<body>
		<ul id="p1">
			<li onmouseover="changeFont(this)" onmouseout="resetFont(this)">11111</li>
			<li onmouseover="changeFont(this)" onmouseout="resetFont(this)">22222</li>
			<li onmouseover="changeFont(this)" onmouseout="resetFont(this)">33333</li>
			<li onmouseover="changeFont(this)" onmouseout="resetFont(this)">44444</li>
		</ul>
		
		<input type="button" value="删除第三个li" onclick="delLi3()"/>
		
		<input type="button" value="克隆div" onclick="cloneDiv()"/>
		
		<input type="button" value="创建一个图片,加在Div之前" onclick="createImg2()"/>
		
		<input type="button" value="创建一个图片" onclick="createImg()"/>
		<div id="d1">
			
		</div>
	</body>
</html>
